<template>
  <div class="basemap">
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content" class="popup-content">
        <div class="tetls">{{ inData.cname }}</div>
        <div class="tetls1">
          <p>电站位置： {{ inData.address }}</p>
          <p>电站额定容量：{{ inData.capNom }}MWh</p>
          <p style="color: #1df2ff"></p>
          <p>全站SOC：{{ inData.soc }}%</p>
          <p style="color: #1df2ff"></p>
          <p>额定功率：{{ inData.pNom }}MW</p>
          <p style="color: #1df2ff"></p>
          <p>实时功率：{{ inData.p }}MW</p>
        </div>
        <div class="echharts">
          <dayCRDL :info="inData"/>
        </div>
      </div>
    </div>
    <div class="searchdiv">
      <!-- <div style="margin: 10px;">
                <el-input size="mini" placeholder="请输入内容" v-model="input3">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div> -->
      <el-scrollbar class="scrollbar-wrapper" style="height: 100%">
        <!-- 内部文本-->
        <div class="search-box">
          <div
              class="search-item"
              @click="acitveCenter(item)"
              :class="activeIndex == item.id ? ' search-item_active' : ''"
              v-for="item in sjlist"
              :key="item.id"
          >
            {{ item.cname }}
          </div>
          <!-- <div class="search-item">炭头山村</div>
                    <div class="search-item  ">王爺簇擁 </div>
                    <div class="search-item">西北营村 </div> -->
        </div>
      </el-scrollbar>
    </div>
    <div id="mapDiv" class="mapDiv" ref="rootmap"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import {Map, View} from "ol";
import XYZ from "ol/source/XYZ";
import {Vector as VectorSource} from "ol/source";
import {Tile as TileLayer, Vector as VectorLayer} from "ol/layer";
import {fromLonLat} from "ol/proj";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import {Icon, Style} from "ol/style";
import Overlay from "ol/Overlay";
import dayCRDL from "./components/dayCRDL.vue";

import {getJWD} from "@/api/modules/home.js";

export default {
  name: "mapBox",
  components: {dayCRDL},
  data() {
    return {
      inData: {},
      input3: "",
      pointLayer: "",
      sjlist: [],
      activeIndex: "",
    };
  },
  mounted() {
    var mapcontainer = this.$refs.rootmap;
    this.pointLayer = new VectorLayer({
      source: new VectorSource(),
    });
    this.map = new Map({
      target: mapcontainer,
      layers: [
        new TileLayer({
          source: new XYZ({
            url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
            wrapX: false,
          }),
        }),
        this.pointLayer,
      ],
      view: new View({
        //地图缩放级别
        projection: "EPSG:3857",
        center: fromLonLat([114.5245739, 38.0061728]), // 石家庄
        zoom: 15,
        maxZoom: 18, // 最大缩放层级
        minZoom: 4, // 最小缩放层级
      }),
    });

    getJWD({id: this.$store.state.oldUserInfo.companyId}).then((res) => {
      if (res.code == 200) {
        this.sjlist = res.data;
        this.$nextTick(() => {
          this.sjlist.forEach((item) => {
            this.addPoint(item);
          });
          this.popup();
          this.acitveCenter(this.sjlist[0]);
        });
      }
    });
  },
  methods: {
    acitveCenter(item) {
      this.activeIndex = item.id;
      let views = this.map.getView();
      views.setCenter(fromLonLat([item.longitude, item.latitude]));
      this.map.render();
    },
    addPoint(data) {
      var anchor = new Feature({
        geometry: new Point(fromLonLat([data.longitude, data.latitude])),
        dataValue: {...data},
      });
      // 设置样式，在样式中就可以设置图标
      anchor.setStyle(
          new Style({
            image: new Icon({
              src: require("./../../assets/img/01.gif"),
              anchor: [0.5, 1], // 设置图标位置
              scale: 1.2,
            }),
          })
      );
      // 添加到之前的创建的layer中去
      this.pointLayer.getSource().addFeature(anchor);
    },
    popup() {
      let _this = this;
      var container = document.getElementById("popup");
      var content = document.getElementById("popup-content");
      var closer = document.getElementById("popup-closer");
      _this.popupLayer = new Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250,
        },
      });
      closer.onclick = function () {
        _this.popupLayer.setPosition(undefined);
        closer.blur();
        return false;
      };
      _this.map.addOverlay(_this.popupLayer);
      // display popup on click
      _this.map.on("singleclick", function (evt) {
        _this.popupLayer.setPosition(coordinates);
        var feature = _this.map.forEachFeatureAtPixel(
            evt.pixel,
            function (feature) {
              return feature;
            }
        );
        if (feature) {
          _this.inData = feature.get("dataValue");
          var coordinates = feature.getGeometry().getCoordinates();
          _this.popupLayer.setPosition(coordinates);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.basemap {
  width: 100%;
  height: 100%;
  position: relative;

  .ol-popup {
    position: absolute;
    background-image: url(./../../assets/img/tcc.png);
    background-size: cover;
    background-repeat: no-repeat;
    bottom: 12px;
    left: -500px;
    width: 289px;
    height: 369px;
    /* background: #030E28; */

    .popup-content {
      width: 100%;
      height: 100%;

      .tetls {
        height: 30px;
        width: 228px;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        line-height: 28px;
        text-align: left;
        padding-left: 20px;
        line-height: 30px;
      }

      .tetls1 {
        height: 120px;
        font-weight: 400;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        line-height: 22px;
        text-align: left;
        margin: 32px 0 13px 25px;
        width: 230px;
        padding-bottom: 13px;
        border-bottom: 1px solid rgba(15, 116, 255, 0.67);
      }

      .echharts {
        width: 100%;
        height: 159px;
        border-radius: 0px 0px 0px 0px;
      }
    }
  }

  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
    color: #fff;
  }

  .ol-popup-closer:after {
    content: "✖";
  }

  .mapDiv {
    width: 100%;
    height: 100%;
  }

  .searchdiv {
    position: absolute;
    top: 20px;
    right: 40px;
    z-index: 101;
    width: 240px;
    height: 259px;
    background: #030e28;
    opacity: 0.9;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #2e7cff;

    .search-box {
      text-align: center;
      opacity: 1;

      .search-item {
        width: 220px;
        height: 36px;
        margin: 0 auto;
        line-height: 36px;
        color: #fff;
        cursor: pointer;
        font-size: 12px;

        &:hover {
          color: rgba(83, 204, 255);
          background: linear-gradient(
                  270deg,
                  rgba(17, 106, 229, 0) 0%,
                  rgba(17, 106, 229, 0.2) 53%,
                  rgba(17, 106, 229, 0) 88%
          );
          border-radius: 0px 0px 0px 0px;
          border: 1px solid;
          border-image: linear-gradient(
                  270deg,
                  rgba(17, 106, 229, 0),
                  rgba(83, 204, 255, 0.6),
                  rgba(17, 106, 229, 0)
          ) 1 1;
        }
      }

      .search-item_active {
        color: rgba(83, 204, 255);
        background: linear-gradient(
                270deg,
                rgba(17, 106, 229, 0) 0%,
                rgba(17, 106, 229, 0.2) 53%,
                rgba(17, 106, 229, 0) 88%
        );
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(
                270deg,
                rgba(17, 106, 229, 0),
                rgba(83, 204, 255, 0.6),
                rgba(17, 106, 229, 0)
        ) 1 1;
      }
    }
  }
}
</style>
